<template>
  <main class="home">
    <div class="logo-box">
      <app-box-logo ref="logo" flow="true" class="logo"></app-box-logo>
      <div class="slogan" :class="sloganClass">{{ slogan }}</div>
    </div>
    <div class="quick-start-box">
      <div class="quick-start-item">
        <img class="icon" src="@/assets/icon_app.svg" alt="" />
        <h3 class="">上传APP</h3>
        <div class="">上传、分发和管理您的APP</div>
      </div>

      <div class="quick-start-item">
        <img class="icon" src="@/assets/icon_console.svg" alt="" />
        <h3 class="">命令行工具</h3>
        <div class="">通过命令行工具可以实现一键自动化上传和管理APP</div>
      </div>
      <div class="quick-start-item">
        <img class="icon" src="@/assets/icon_phone.svg" alt="" />
        <h3 class="">UUID</h3>
        <div class="">iOS设备的UUID获取工具，供开发者将设备添加到Apple开发者账号中</div>
      </div>
    </div>
  </main>
</template>

<script>
import AppBoxLogo from '@/components/AppBoxLogo.vue'
import { Sleep, PrintText } from '@/tools/print-text.js'
export default {
  name: 'Home',
  components: {
    AppBoxLogo
  },
  data () {
    return {
      slogan: '',
      sloganClass: ''
    }
  },
  computed: {
  },
  mounted () {
    this.showSlogan()
  },
  methods: {
    async showSlogan () {
      const slogan1 = '分发APP'
      const slogan2 = '如此轻松！'

      await Sleep(1000)
      this.$refs.logo.enter()
      await PrintText({
        text: slogan1,
        print: (text) => {
          this.slogan = text
        }
      })
      await Sleep(200)
      await PrintText({
        text: slogan2,
        backspace: false,
        print: (text) => {
          this.slogan = text
        }
      })
      await Sleep(1000)
      this.$refs.logo.leave()
      this.sloganClass = 'slogan-hide'
      await Sleep(1000)
      this.slogan = slogan1 + '，' + slogan2
      this.sloganClass = ''
    }
  }
}
</script>
<style lang="scss" scoped>
  .home {
    min-height: calc(100% - 160px);
    background: linear-gradient(rgb(55, 113, 172), var(--MainColor));
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 50px;
  }

  .logo-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .logo {
      width: 250px;
      height: 250px;
    }
    .slogan {
      color: white;
      font-size: 50px;
      height: 140px;
      text-align: center;
      width: 100%;
      transition: opacity 0.3s ease;
    }
    .slogan-hide {
      opacity: 0;
    }
  }
  .quick-start-box {
    display: flex;
    flex-wrap:wrap;
    margin-top: 100px;
    gap: 50px;
    justify-content: center;
    .quick-start-item {
      cursor: pointer;
      width: 180px;
      border: white solid 1px;
      border-radius: 15px;
      color: white;
      display: flex;
      flex-direction: column;
      padding: 20px;
      align-items: center;
      transition: box-shadow 0.3s ease, transform 0.3s ease-in-out;
      box-shadow: var(--shadow);
      .icon {
        width: 100px;
        height: 100px;
      }
      div {
        text-align: center;
      }
      &:hover {
        box-shadow: var(--shadow-hover);
        transform: translateY(-10px);
      }
    }
  }
</style>
